import React, {Fragment} from 'react';
import {Layout, Menu, Avatar, Dropdown} from 'antd';
import {NavLink, Route, Switch} from 'react-router-dom';
import Map2D from './Map2D';
import Map3D from './Map3D';
import Visualization from './Visualization';
import styles from './index.module.less';
import {UserOutlined, DownOutlined} from '@ant-design/icons';

const MenuItem = Menu.Item;
const {Header} = Layout;
export default function Main(props) {
    const urlParams = new URLSearchParams(props.location.search);
    const serviceId = urlParams.get('serviceId');
    const menu = (
        <Menu>
            <Menu.Item>
                <a
                    onClick={() => {
                        props.history.replace('/');
                    }}
                >
                    返回首页
                </a>
            </Menu.Item>
            <Menu.Item danger>
                <a
                    onClick={() => {
                        props.history.replace('/');
                    }}
                >
                    退出登陆
                </a>
            </Menu.Item>
        </Menu>
    );

    return (
        <Fragment>
            <div className={styles.appSty}>
                <Header className={styles.header}>
                    <h1 style={{color: '#fff'}}>地图对比系统</h1>
                    <Menu style={{width: 300}} theme="dark" mode="horizontal" defaultSelectedKeys={[props.location.pathname]}>
                        <MenuItem key="/preview">
                            <NavLink to={'/preview'}>2D地图</NavLink>
                        </MenuItem>
                        <MenuItem key="/preview/3d">
                            <NavLink to={'/preview/3d'}>GL地图</NavLink>
                        </MenuItem>
                        <MenuItem key="/preview/visualization">
                            <NavLink to={'/preview/visualization'}>可视化</NavLink>
                        </MenuItem>
                    </Menu>
                    <div className={styles.headImg}>
                        <div className={styles.userInfo}>
                            <Avatar size="small" icon={<UserOutlined />} />
                            <div className={styles.textHea}>用户名：{localStorage.getItem('username')}</div>
                        </div>
                        <div>
                            <Dropdown overlay={menu}>
                                <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                                    更多操作
                                    <DownOutlined />
                                </a>
                            </Dropdown>
                        </div>
                    </div>
                </Header>
            </div>
            <Switch>
                <Route exact path="/preview" component={Map2D} />
                <Route exact path="/preview/3d" component={Map3D} />
                <Route exact path="/preview/visualization" component={Visualization} />
            </Switch>
        </Fragment>
    );
}
